<template>
  <el-container class="m-content-display">
    <el-header><Header /></el-header>
    <el-main class="main">
      <div class="left">
        <el-card class="consultantList">
          <div style="height:30px">
            <el-col :span="12">
              <span style="font-weight:bold;">心理咨询师</span>
            </el-col>
            <el-col :span="12">
              <el-input v-model="search" style="width:300px" size="small" placeholder="搜索咨询师名字">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="findConsultant" />
              </el-input>
            </el-col>
          </div>
        </el-card>
        <el-card class="consultantList" style="margin-top:20px">
          <div slot="header" class="clearfix">
            <span class="label">类别:</span>
            <ul class="selected-list">
              <li class="selected-item">
                <router-link :to="'/consultation'">
                  <a :class="route === undefined || route === '' ? 'select':''">全部类别</a>
                </router-link>
              </li>
              <li v-for="skillField in skillFieldList" :key="skillField.id" class="selected-item">
                <router-link :to="{name: 'TeacherList', params: {id : skillField.id} }">
                  <a :class="skillField.id === route ? 'select': ''" @click="openFullScreen2">{{ skillField.value }}</a>
                </router-link>
              </li>
            </ul>
          </div>
          <ul class="teacher-list">
            <li v-for="teacher in consultantList" :key="teacher.id" class="teacher-item">
              <router-link :to="{name: 'User', params: {id: teacher.id} }">
                <el-image :src="teacher.avatar" class="avatar" />
              </router-link>
              <div class="teacher-info">
                <span class="name">{{ teacher.username }}</span>
                <span class="address">{{ teacher.address }}</span>
                <ul class="skills">
                  <li v-for="skill in teacher.skills" :key="skill">{{ skill }}</li>
                </ul>
              </div>
              <a @click="gotoWhisper(teacher.id,teacher.username)"><span class="zixun">咨询</span></a>
            </li>
          </ul>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="pageNum"
          />
        </el-card>
      </div>
      <div class="right">
        <el-card class="apply">
          <el-image class="img" src="http://rbfvta36h.hd-bkt.clouddn.com/xlzxs.png" alt="心理咨询师入驻" />
          <a @click="gotoBeConsultant"><div class="apply-btn"><i class="el-icon-edit" />心理咨询师申请入驻</div></a>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
import { getConsultantList } from '@/api/user'
import { getField } from '@/api/application'
export default {
  name: 'Consultaion',
  components: { Header },
  data() {
    return {
      search: '',
      consultantList: [],
      skillFieldList: [],
      route: '',
      total: Number(),
      pageNum: 1
    }
  },
  watch: {
    '$route'() {
      this.route = this.$route.params.id
      this.openFullScreen2()// 我的初始化方法
    }
  },
  mounted() {
    this.getField()
    this.findConsultant()
  },
  methods: {
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        this.findConsultant()
        loading.close()
      }, 100)
    },
    findConsultant() {
      getConsultantList({ username: this.search, skillFieldId: this.$route.params.id, pageIndex: this.pageNum }).then(res => {
        this.consultantList = res.data.list
        this.total = res.data.total
        this.pageNum = res.data.pageNum
      })
    },
    getField() {
      getField().then(res => {
        this.skillFieldList = res.data
      })
    },
    gotoWhisper(id, name) {
      if (this.$store.state.user.id === '') {
        this.$message({
          type: 'info',
          message: '请先登录再点击咨询'
        })
        return
      }
      localStorage.setItem('toUserId', id)
      localStorage.setItem('name', name)
      this.$router.push('/whisper/myChats')
    },
    gotoBeConsultant() {
      if (this.$store.state.user.id === '') {
        this.$message({
          type: 'info',
          message: '请先登录再进行申请'
        })
        return
      }
      this.$router.push('/to-be-consultant')
    }
  }
}
</script>

<style lang="scss" scoped>
.m-content-display{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.el-header{
  padding: 0;
}
.main{
  background-color: aliceblue;
  display: flex;
  justify-content:center;
}
.el-card {
  border-radius: 12px;
}
.left{
  width:40%;
  ul{
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    li {
      list-style: none;
    }
  }
}
.icon {
  position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #bcc2cf;
}
.select{
  color: #6982fa;
}
.selected-list{
  width: 524px;
    margin-left: 15px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #566171;
    .selected-item {
      display: inline-block;
      margin-left: 28px;
      margin-bottom: 10px;
      white-space: nowrap;
    }
}
a, a:active, a:focus, a:hover, a:visited {
    color: #404040;
    text-decoration: none;
    outline: none;
    // star: expression(this.onFocus=this.blur());
}
.avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-right: 20px;
    cursor: pointer;
    box-sizing: border-box;
}
.teacher-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    height: 68px;
}
.teacher-info {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name {
      font-size: 20px;
    }
    .address{
      margin-top: 5px;
      font-size: 15px;
    }
}
.zixun {
    display: inline-block;
    padding: 11px 24px;
    border: 1px solid #6982fa;
    border-radius: 20px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #6982fa;
    text-align: right;
    line-height: 16px;
    cursor: pointer;
    white-space: nowrap;
}
.clearfix {
    margin-bottom: 13px;
    display: flex;
    .label{
      float: left;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #21252d;
      box-sizing: border-box;
      width: 36px;
      position: relative;
      top: -3px;
      white-space: nowrap;
    }
}
.teacher-list {
  ul{
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      width: 72px;
      margin-left: 0px;
      margin-bottom: 10px;
      white-space: nowrap;
      color: #606266;
      font-size: 13px;
    }
  }
}
.skills{
  padding-left: 0;
}
.el-input__icon {
  cursor: pointer;
}
.apply {
    width: 360px;
    margin-left: 20px;
    padding: 30px 20px;
    border-radius: 14px;
    text-align: center;
    a {
      color: #404040;
      text-decoration: none;
      outline: none;
    }
}
.img {
  border-radius: 12px;
}
.apply-btn{
    margin-top: 10px;
    padding: 18px 0;
    background: #6982fa;
    box-shadow: 0 20px 40px 0 rgb(227 225 237 / 57%);
    border-radius: 34px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    cursor: pointer;
}
.el-pagination{
  text-align: center;
}
</style>
